<template>
  <!-- 账号密码登录 -->
	<layout title="登录" background="#fff">
    <view
      class="screen"
      style="height: 100vh"
      :style="'padding-top:' + vuex_phoneLayout.screenPaddingTop + 'px'"
    >
      <view>
        <view class="login_title"> 填写手机号 </view>
        <view class="list">
          <view class="list-call">
            <image
              src="../../../static/aidex/login/phone.png"
              style="width: 44rpx; height: 44rpx"
              mode="widthFix"
            ></image>
            <input
              class="u-input"
              type="text"
              v-model="username"
              maxlength="32"
              :placeholder="$t('login.placeholderAccount')"
              value="admin"
            />
          </view>
          <view class="list-call">
            <view
              class="iconfont icon-key"
              style="font-size: 22px; color: #7b7b7b"
            ></view>
            <input
              class="u-input"
              type="text"
              v-model="password"
              maxlength="32"
              :placeholder="$t('login.placeholderPassword')"
              :password="!showPassword"
              value="admin123"
            />
            <image
              class="u-icon-right"
              :src="
                '/static/aidex/login/eye_' +
                (showPassword ? 'open' : 'close') +
                '.png'
              "
              @click="showPass()"
            ></image>
          </view>
        </view>
        <view
          class="default-button"
          style="margin-top: 40rpx"
          @click="submit('1')"
          ><text>登录</text></view
        >
        <div style="padding: 0rpx 60rpx 0; margin-top: -10rpx">
          <view class="register">
            <navigator
              class="register-link"
              url="inputPhone"
              open-type="navigate"
              >{{ $t("login.forget") }}</navigator
            >
            <!-- <navigator class="register-link" url="reg" open-type="navigate">{{$t('login.reg')}}</navigator> -->
          </view>
          <!-- <u-checkbox v-model="remember" active-color="#5473e8">{{$t('login.autoLogin')}}</u-checkbox> -->
        </div>
      </view>

      <view
        class="screen-bottomFill"
        style="opacity: 1"
        :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'"
      >
        <!-- 用来填充导航 和 底部的多余 -->
      </view>
    </view>
  </layout>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
import base64 from "@/common/base64.js";
export default {
  data() {
    return {
      navigationBarStyle: {
        background: "",
        color: "black",
        iconText: "", //导航栏文字
      },
      phoneNo: "",
      username: "",
      password: "",
      loginType: "currentPhone",
      showPassword: false,
      remember: true,
      isValidCodeLogin: false,
      validCode: "",
      imgValidCodeSrc: null,
      list: [{ name: "用户名" }, { name: "手机号" }],
      activeColor: "#007aff",
    };
  },
  onLoad() {
    // this.$u.api.index({loginCheck: true}).then(res => {
    // 	if (res.code == '200'){
    // 		uni.reLaunch({
    // 			url: '/pages/sys/home/index'
    // 		});
    // 	}
    // });
  },
  methods: {
    showPass() {
      this.showPassword = !this.showPassword;
    },
    qiehuanLogin() {
      this.loginType = "other";
    },
    refreshImgValidCode(e) {
      if (this.vuex_token == "") {
        this.$u.api.index().then((res) => {
          this.imgValidCodeSrc =
            this.vuex_config.baseUrl +
            "/validCode?__sid=" +
            res.sessionid +
            "&t=" +
            new Date().getTime();
        });
      } else {
        this.imgValidCodeSrc =
          this.vuex_config.baseUrl +
          "/validCode?__sid=" +
          this.vuex_token +
          "&t=" +
          new Date().getTime();
      }
      this.validCode = "";
    },
    async queryHasRunningPermission() {
      const data = await this.$u.api.queryRealNameProcess();
      return data.data && data.data.type === 5;
    },
    async submit(loginType) {
      if (this.username.length == 0) {
        this.$u.toast("请输入账号");
        return;
      }
      if (this.password.length == 0) {
        this.$u.toast("请输入密码");
        return;
      }
      let isRunner = String(this.vuex_identity) === "1";

      const res = await this.$u.api.login({
        tel: this.username,
        password: this.password.split(""),
      });

      if (res.code == "200") {
        this.$u.toast("登录成功");
        this.$u.api.getUserMes().then((res) => {
          if (res.code == 200) {
            this.$u.vuex("vuex_user", res.data);
          }
        });
        if (isRunner) {
          if (await this.queryHasRunningPermission()) {
            this.$u.vuex("vuex_flag", "runner");
          } else {
            this.$u.toast("没有认证跑腿员");
            isRunner = false;
          }
        }
        setTimeout(() => {
          uni.reLaunch({
            url: isRunner ? "/pages/sys/home/hall" : "/pages/sys/home/index",
          });
        }, 500);
      } else {
        this.$u.toast(res.message);
      }
      if (res.isValidCodeLogin) {
        this.isValidCodeLogin = true;
        this.refreshImgValidCode();
      }
    },
    wxLogin(res) {
      this.$u.toast("微信登录");
    },
    qqLogin() {
      this.$u.toast("QQ 登录");
    },
  },
};
</script>
<style lang="scss">
@import "index.scss";

.logo {
  width: 80%;
  font-size: 64rpx;
  color: #5473e8;
  margin: 80rpx auto 80rpx auto;
}
.list-call-icon {
  color: #ff0000;
}
.currentPhone-box {
  text-align: center;
  padding: 40rpx 80rpx;
  .number-text {
    color: #000000;
    font-size: 60rpx;
  }
  .other-text {
    color: #999999;
    font-size: 26rpx;
    padding: 20rpx 0;
  }
  .u-btn {
    margin: 30rpx auto;
  }
  .u-hairline-border {
    border: 1px solid #fff;
  }
}

.register {
  display: inline-block;
  color: #5473e8;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  float: left;
  margin-top: 6rpx;
}
.register-link {
  float: left;
  padding: 0 16rpx;
}
.reg-link {
  display: inline-block;
  color: #5473e8;
}
.oauth2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0rpx 100rpx 30rpx;

  image {
    height: 80rpx;
    width: 80rpx;
  }
}
.u-tabs {
  padding: 0 70rpx;
}
</style>
